<template>
	<view class="page">
		<video class="fixedTop w-100" style="height: 400px;" autoplay :controls="false" muted src="/static/indexbg.mp4" :loop="true" object-fit="cover"></video>
		<view class="loginPage">
			<view class="listboxs">
				<view class="label">
					Welcome!
				</view>

				<image class="logo" src="/static/images/logo.png" mode="widthFix"></image>

				<view class="nopwd" @click="wxRegister">
					还没有账号？立即注册
				</view>
			</view>

			<view class="listboxs" style="background-color: #fff;">
				<view class="login_formBox">
					<view class="login_form">
						<view class="name">
							<span :style="{'color':loginIndex == 1?'#de4849':''}" @click="loginIndex = 1" style="margin-right: 50px;">微信登录</span>
							<span :style="{'color':loginIndex == 2?'#de4849':''}" @click="loginIndex = 2">账号密码登录</span>
						</view>
						
						<web-view v-if="loginIndex == 1" :src="pcwxaddress" style="width: 100%;top: 100px;"></web-view>

						
						<view class="" v-if="loginIndex == 2">
							<view class="list">
								<view class="">用户名</view>
							
								<input placeholder-class="text-light-muted" style="height: 130px;" type="text" fontSize="15"
									border="none" placeholder="请输入用户名" v-model="form.username" @keydown.enter="submit" />
							</view>
							<view class="list">
								<view class="">密码</view>
							
								<input placeholder-class="text-light-muted" style="height: 130px;" type="password" fontSize="15" border="none"
									placeholder="请输入密码" v-model="form.password" @keydown.enter="submit" />
							</view>
						</view>
						<view class="flexLogin" v-show="loginIndex == 2">
							<view class="loginBtn " @click="submit">登 录</view>
						</view>
						
					</view>
					
					
				</view>
				<view class="forget " v-show="loginIndex == 2">
					
					<view class="" style="display: flex;">
						<view @click="wxRegister" style="margin-right: 30rpx;">立即注册</view>
					</view>
					<view class="" style="display: flex;">
						<view @click="toPage('/pages/changeMy/forgetpwd')" style="margin-right: 30rpx;">忘记密码？</view>
					</view>
				</view>
				
				<!-- <view class="login_formBox">
					<view class="login_form">
						<view class="name">
							登录
						</view>
						<view class="list">
							<view class="">用户名</view>

							<input placeholder-class="text-light-muted" style="height: 130px;" type="text" fontSize="15"
								border="none" placeholder="请输入用户名" v-model="form.username" @keydown.enter="submit" />
						</view>
						<view class="list">
							<view class="">密码</view>

							<input placeholder-class="text-light-muted" style="height: 130px;" type="password" fontSize="15" border="none"
								placeholder="请输入密码" v-model="form.password" @keydown.enter="submit" />
						</view>
					</view>

					<view class="flexLogin">
						<view class="loginBtn " @click="submit">登 录</view>
					</view>

					<view class="forget ">
						
						<view class="" style="display: flex;">
							<view @click="wxRegister" style="margin-right: 30rpx;">立即注册</view>
						</view>
						<view class="" style="display: flex;">
							<view @click="toPage('/pages/changeMy/forgetpwd')" style="margin-right: 30rpx;">忘记密码？</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>

		<view class="text-center font-weight-bold beian"> 沪ICP备2023026611号-3 </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginIndex:1,
				pcwxaddress:'',
				bgColor: '#08C060',
				titleStyle: {
					color: '#fff'
				},
				form: {
					username: '',
					password: ''
				},
				agreeCheck: false,
				weiloginForm: {
					code: '',
					openId: '',
					otherAvatarUrl: '',
					otherNickname: '',
					otherPhone: '',
					otherSex: '',
					otherUsername: '',
					provider: 'wxmp',
				}
			};
		},
		onLoad(e) {
			this.getwechataddress()
			console.log('url参数')
			console.log(e)
			if(e && e.code){
				this.codeBylogin(e.code)
			}
		},
		methods: {
			codeBylogin(code){
				let data = {
					code
				}
				this.$api.wxPcLogin(data).then(res2=>{
					console.log('登录返回的参数')
					console.log(res2)
					if (res2.token) {
						uni.setStorageSync('token', res2.token)
						uni.setStorageSync('familyId', res2.familyIds)
						uni.setStorageSync('nickname', res2.nickname)
						uni.setStorageSync('username', res2.username)
						uni.setStorageSync('showPayment', res2.showPayment)
					
						uni.setStorageSync('userNewCalendar', res2.userNewCalendar)
					
						uni.setStorageSync('maxImageMegBytes', res2.maxImageMegBytes)
						uni.setStorageSync('maxVideoMegBytes', res2.maxVideoMegBytes)
						uni.setStorageSync('systemUser', res2.systemUser)
						uni.reLaunch({
							url: '/pages/tabbar/index/index'
						})
					} else {
						uni.navigateTo({
							url: '/pages/login/index2'
						})
					}
				})
			},
			getwechataddress(){
				this.$api.getPcWxLoginUrl().then(res=>{
					console.log(res)
					this.pcwxaddress = res
				})
			},
			wxRegister() {
				uni.navigateTo({
					url: `/pages/register/index`
				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				});
			},
			submitlogin() {
				uni.login({
					success: loginRes => {
						this.$api.loginByWp({
							code: loginRes.code
						}).then(res2 => {

							// this.weiloginForm.code = loginRes.code
							// this.weiloginForm.openId = res2.openId
							// this.weiloginForm.otherAvatarUrl = ''
							// this.weiloginForm.otherNickname ='微信用户'
							// this.weiloginForm.otherSex = ''

							if (res2.token) {
								uni.setStorageSync('token', res2.token)
								uni.setStorageSync('familyId', res2.familyIds)
								uni.setStorageSync('nickname', res2.nickname)
								uni.setStorageSync('username', res2.username)
								uni.setStorageSync('showPayment', res2.showPayment)

								uni.setStorageSync('userNewCalendar', res2.userNewCalendar)

								uni.setStorageSync('maxImageMegBytes', res2.maxImageMegBytes)
								uni.setStorageSync('maxVideoMegBytes', res2.maxVideoMegBytes)
								uni.setStorageSync('systemUser', res2.systemUser)
								uni.reLaunch({
									url: '/pages/tabbar/index/index'
								})
							} else {
								uni.navigateTo({
									url: '/pages/login/index2'
								})
							}
						})


					}
				})
			},
			getPhoneNumber(e) {
				uni.login({
					success: loginRes => {
						let code = loginRes.code
						if (e.detail.errMsg == 'getPhoneNumber:ok') {
							let data = {
								code: code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
							}
							this.$api.getWxmpPhoneNo(data).then(res => {
								console.log(res)
								let overdata = JSON.parse(res)
								this.weiloginForm.otherPhone = overdata.phoneNumber
								this.login()
							})
						} else {
							this.login()
						}
					}
				})



			},
			login() {
				this.$api.loginloginByWp2(this.weiloginForm).then(res => {
					uni.setStorageSync('token', res.token)
					uni.setStorageSync('familyId', res.familyIds)
					uni.setStorageSync('nickname', res.nickname)
					uni.setStorageSync('username', res.username)
					uni.setStorageSync('showPayment', res.showPayment)
					uni.setStorageSync('userNewCalendar', res.userNewCalendar)

					uni.setStorageSync('maxImageMegBytes', res.maxImageMegBytes)
					uni.setStorageSync('maxVideoMegBytes', res.maxVideoMegBytes)
					uni.setStorageSync('systemUser', res.systemUser)



					let menberdata = uni.getStorageSync('menberdata') ? uni.getStorageSync('menberdata') : ''
					uni.hideLoading()
					if (menberdata) {
						console.log(menberdata)

						this.$api.acceptInvite(menberdata).then(res => {
							this.$Show.show('家庭加入成功')
							uni.removeStorageSync('menberdata')
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/tabbar/index/index'
								})
							}, 1500)
						})
					} else {
						console.log(res)
						uni.reLaunch({
							url: '/pages/tabbar/index/index'
						})
					}

				})
			},
			submit() {
				if (this.form.username == '') {
					return this.$Show.show('请输入用户名')
				}


				if (this.form.password == '') {
					return this.$Show.show('请输入密码')
				}

				// if (!this.agreeCheck) {
				// 	return this.$Show.show('请勾选用户协议及隐私政策')
				// }

				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$api.loginusername(this.form).then(res => {
					console.log(res)
					uni.setStorageSync('token', res.token)
					uni.setStorageSync('familyId', res.familyIds)
					uni.setStorageSync('nickname', res.nickname)
					uni.setStorageSync('username', res.username)
					uni.setStorageSync('showPayment', res.showPayment)
					uni.setStorageSync('userNewCalendar', res.userNewCalendar)

					uni.setStorageSync('maxImageMegBytes', res.maxImageMegBytes)
					uni.setStorageSync('maxVideoMegBytes', res.maxVideoMegBytes)
					uni.setStorageSync('systemUser', res.systemUser)



					let menberdata = uni.getStorageSync('menberdata') ? uni.getStorageSync('menberdata') : ''
					uni.hideLoading()
					if (menberdata) {
						console.log(menberdata)

						this.$api.acceptInvite(menberdata).then(res => {
							this.$Show.show('家庭加入成功')
							uni.removeStorageSync('menberdata')
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/tabbar/index/index'
								})
							}, 1500)
						})
					} else {
						console.log(res)
						uni.reLaunch({
							url: '/pages/tabbar/index/index'
						})
						// if(!res.familyIds || res.familyIds.length == 0){
						// 	uni.reLaunch({
						// 		url:'/pages/tabbar/family/createFamily'
						// 	})
						// }else{


						// }
					}



				})


			},

		}
	};
</script>

<style>
	page {
		background-color: #f0f2f5;
	}
</style>

<style lang="scss">
	.registerText {
		color: #fff;
	}

	.beian {
		position: fixed;
		right: 0;
		bottom: 30;
		left: 0;
		z-index: 1030;
	}

	.login_form {
		background-color: #fff;

		.list {
			display: flex;
			height: 120rpx;
			flex-direction: column;
			margin-bottom: 40px;

			.label2 {
				width: 170rpx;
				text-align: left;
				margin-right: 20rpx;
				margin-bottom: 10px;
				color: #a3a1a1;
				font-size: 14px;
				font-weight: 100;
			}

			input {
				outline: none;
				width: 80%;
			}
		}

		.list:last-child {
			border: none;
		}
	}

	.agree {
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		margin: 30rpx 0;

		image {
			width: 45rpx;
			height: 45rpx;
			margin-right: 10rpx;
		}

		span {
			text-decoration: underline;
		}
	}

	.loginBtn {
		width: 100%;
		height: 110rpx;
		font-size: 32rpx;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin: 0 auto;
		margin-top: 70rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		background-color: #000;

	}

	.forget {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 50rpx;

		image {
			width: 70rpx;
			height: auto;
		}

		view {
			cursor: pointer;
		}
	}
	
	.weixlogin{
		width: 100%;
		margin: 0 auto;
		margin-top: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		
		image {
			width: 70rpx;
			height: auto;
			margin-bottom: 20rpx;
		}
		
		view {
			cursor: pointer;
		}
	}

	.otherLogin {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 30rx;
		margin-bottom: 40rpx;

		.btns {
			display: flex;
			align-items: center;
			justify-content: center;

			view {
				width: 300rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				border-radius: 10rpx;
				background-color: #06b2c0;
				position: relative;
			}

			.getUserInfobtn {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 100;
				opacity: 0;
			}

			image {
				width: 50rpx;
				height: auto;
				margin-right: 10rpx;
			}
		}
	}

	.getNumber {
		height: 370rpx;
		background-color: #f8f8f8;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		box-sizing: border-box;
		padding: 30rpx;

		.title {
			display: flex;
			align-items: center;
			margin-bottom: 50rpx;

			image {
				width: 40rpx;
				height: auto;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}

		.btns {
			display: flex;
			align-items: center;
			margin-top: 70rpx;

			span {
				width: 330rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
				color: #08C060;
				border-radius: 10rpx;
				position: relative;
			}

			.act {
				background-color: #08C060;
				color: #fff;
			}

			.getPhoneNumberbss {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 10;
				opacity: 0;

			}
		}
	}

	.login_formBox {
		
	}


	.loginPage {
		width: 65%;
		margin: 0 auto;
		height: 60vh;
		background: red;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 15px;
		background-color: #ededed;
		display: flex;
		overflow: hidden;

		.listboxs {
			width: 50%;
			box-sizing: border-box;
			padding:20px 30px;
			position: relative;

			.login_form {
				.name {
					font-size: 22px;
					color: #000;
					letter-spacing: 2px;
					margin-bottom: 20px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					span{
						width: 50%;
						text-align: center;
						display: block;
					}
				}
			}

			.label {
				font-size: 22px;
				font-weight: bold;
			}

			.logo {
				display: block;
				margin: 0 auto;
				width: 50%;
				height: auto;
				margin-top: 17%;
			}

			.nopwd {
				position: absolute;
				bottom: 30px;
				left: 30px;
				cursor: pointer;

			}
		}
	}

	::v-deep .u-input__content__field-wrapper__field {
		height: 50px;
		border-bottom: 1px solid #f8f8f8;
	}
</style>